<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="">
        <el-input v-model="queryParams.trackCode" placeholder="股道名称" clearable style="width: 150px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList" style="width: 90px">查询</el-button>
        <el-button @click="resetQuery" style="width: 90px">重置</el-button>
        <el-button type="primary" @click="handleAdd" style="width: 90px">新增</el-button>
        <el-button type="primary" @click="handleQuery" style="width: 90px">同步更新</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <el-table :key="Math.random()" v-loading="loading" :data="railList" height="58vh" border @selection-change="selectiontab">
      <el-table-column type="selection" label="全选" width="85" />
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="车站名称" prop="stationName" min-width="80" />
      <el-table-column label="行别" prop="progressType" min-width="80" />
      <el-table-column label="股道名称" prop="trackCode" min-width="80" />
      <el-table-column label="股道长度(m)" prop="totalLength" min-width="80" />
      <el-table-column label="排序" prop="sort" min-width="80" />
      <el-table-column label="更新人" prop="updateUser" min-width="80" />
      <el-table-column label="更新时间" prop="updateTime" min-width="80" />
      <el-table-column label="操作" min-width="160">
        <template #default="scope">
          <div class="buttontext">
            <el-button link type="primary" @click="rise(scope.row)">升序</el-button>
            <el-button link type="primary" @click="drop(scope.row)">降序</el-button>
            <el-button link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button link type="primary" @click="handDelete(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage4"
      :page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      background="background"
      layout="total, prev, pager, next, sizes, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" v-model="open" width="1300px" append-to-body>
      <el-form ref="userRef" :model="form" :rules="rules" label-width="120px" :inline="true">
        <el-row>
          <el-col :span="8">
            <el-form-item label="车站名称" prop="stationId">
              <el-select filterable clearable style="width: 180px" v-model="form.stationId" placeholder="请选择">
                <el-option v-for="dict in stationIdList" :key="dict.id" :label="dict.stationName" :value="dict.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行别" prop="progressTypeId">
              <el-select filterable clearable style="width: 180px" v-model="form.progressTypeId" placeholder="请选择">
                <el-option v-for="dict in progressTypeobj" :key="dict.id" :label="dict.progressType" :value="dict.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="股道名称" prop="trackCode">
              <el-input v-model="form.trackCode" placeholder="请输入股道名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="股道长度(m)" prop="totalLength">
              <el-input v-model="form.totalLength" placeholder="请输入股道长度" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Bridge">
import {
  selectProDictionariesFacilityTrackList,
  insertProDictionariesFacilityTrack,
  editProDictionariesFacilityTrack,
  deleteProDictionariesFacilityTrackById,
  listprogresstype,
  syncTrack,
  liststation,
} from "@/api/main/dataDictionary.js";
import { ElMessageBox } from "element-plus";
import { reactive, ref, toRefs } from "vue";
import { formatDate } from "@/utils";
const { proxy } = getCurrentInstance();
const title = ref("新增");
const loading = ref(true);
const open = ref(false);

const data = reactive({
  railList: [],
  selecttabList: [],
  form: {},
  queryParams: {
    pageNumber: "1",
    pageSize: "10",
    trackCode: "",
  },
  rules: {
    stationId: [{ required: true, message: "车站名称不能为空", trigger: ["blur", "change"] }],
    trackCode: [{ required: true, message: "股道名称不能为空", trigger: ["blur", "change"] }],
  },
  progressTypeobj: [],
  stationIdList: [],
});

const { queryParams, railList, selecttabList, form, rules, progressTypeobj, stationIdList } = toRefs(data);

//分页
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const total = ref(10);
const handleSizeChange = (val) => {
  pageSize4.value = val;
  getList();
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  currentPage4.value = val;
  getList();
  console.log(`current page: ${val}`);
};

/** 查询列表 */
function getList() {
  loading.value = true;
  queryParams.value.pageNum = currentPage4.value;
  queryParams.value.pageSize = pageSize4.value;
  selectProDictionariesFacilityTrackList(queryParams.value).then((res) => {
    if (res.code == 200) {
      data.railList = res.data;
      total.value = res.count;
    }
    loading.value = false;
  });
}
getList();

function getprogressTypeobj() {
  let obj = {
    pageNum: 1,
    pageSize: 999999,
  };
  listprogresstype(obj).then((res) => {
    if (res.code == 200) {
      data.progressTypeobj = res.data;
    }
  });
  liststation(obj).then((res) => {
    if (res.code == 200) {
      data.stationIdList = res.data;
    }
  });
}
getprogressTypeobj();
/* 删除单行数据 */
function handDelete(row) {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteProDictionariesFacilityTrackById({ id: row }).then((res) => {
        if (res.code == 200) {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        }
      });
    })
    .catch(() => {
      proxy.$message("取消删除");
    });
}

/** 重置操作表单 */
function reset() {
  form.value = {
    id: "",
    stationId: "",
    progressTypeId: "",
    trackCode: "",
    totalLength: "",
    updateUser: "",
    updateTime: "",
    sort: "",
  };
  proxy.resetForm("userRef");
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增";
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["userRef"].validate((valid) => {
    if (valid) {
      form.value.updateTime = formatDate(new Date());
      if (form.value.id) {
        editProDictionariesFacilityTrack(form.value).then((res) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        form.value.updateUser = sessionStorage.getItem("username");
        insertProDictionariesFacilityTrack(form.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
function selectiontab(row) {
  selecttabList.value = row;
}
// 同步更新
function handleQuery() {
  syncTrack({
    updateUser: sessionStorage.getItem("username"),
  }).then((res) => {
    if (res.code == 200) {
      getList();
      proxy.$modal.msgSuccess("同步成功");
    }
  });
}
//重置
function resetQuery() {
  queryParams.value = {
    pageNumber: "1",
    pageSize: "10",
    trackCode: "",
  };
  getList();
}
// 查看参数
function handleUpdate(rows) {
  form.value = JSON.parse(JSON.stringify(rows));
  open.value = true;
  title.value = "修改";
}
function rise(item) {
  if (item.sort == 0 || !item.sort) {
    return false;
  }
  item.sort = item.sort - 1;
  editProDictionariesFacilityTrack(item).then((res) => {
    getList();
  });
}
function drop(item) {
  item.sort++;
  editProDictionariesFacilityTrack(item).then((res) => {
    getList();
  });
}
</script>

<style scoped lang="scss">
.divflex {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .leftx {
    width: 45%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e8e8e8;
    margin-top: 3px;
  }

  .mainz {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
  }

  .rightx {
    width: 45%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e8e8e8;
    margin-top: 3px;
  }
}

.buttontext {
  .el-button:hover {
    text-decoration: line-through !important;
  }
}

.el-form--inline .el-form-item.formitemcla {
  margin-right: 5px !important;
}
</style>
